import React, { useState } from 'react';
import { Form, Button, message,Tabs, Select, Input, List, Radio } from 'antd'; 
import { CheckOutlined } from '@ant-design/icons';
import { history } from 'umi'
import { connect } from 'dva';
import styles from './index.less';
const { TabPane } = Tabs;
const { Option } = Select.Option;
const { Search } = Input;


const MessagePage = (props) => {
  const { dispatch } = props;
  const [activeKey, setActiveKey] = useState('1')
  const [mList, setMList] = useState([
    {
        content: '齐伟对您2023年度OKR进行了评论，快去看看吧~',
        type: '1',
        time: '2023-09-29 18:29:10',
        isRead: '0',
    },
    {
        content: '您关注的OKR发生变更，请及时关注！',
        type: '1',
        time: '2023-09-18 12:28:10',
        isRead: '0',
    },
    {
        content: '您负责的OKR已审批完成，请及时查看！',
        type: '1',
        time: '2023-09-12 18:15:10',
        isRead: '0',
    },
    {
        content: '张奇峰关注了您的OKR！',
        type: '1',
        time: '2023-08-28 08:39:10',
        isRead: '0',
    },
    {
        content: '你有新的待办任务，请及时查看！',
        type: '1',
        time: '2023-08-22 14:28:09',
        isRead: '0',
    },
    {
        content: '你有新的待办任务，请及时查看！',
        type: '1',
        time: '2023-08-10 20:12:29',
        isRead: '0',
    },
    {
        content: '万事开头难，本季度OKR还未完成，请尽快填写哦！',
        type: '1',
        time: '2023-07-28 13:25:17',
        isRead: '0',
    },
    {
        content: '李雪负责的OKR和你建立了依赖关系，请查看！',
        type: '1',
        time: '2023-07-17 17:19:42',
        isRead: '1',
    },
    {
        content: '风险提醒！你的OKR已长时间未更新进度，请及时维护！',
        type: '1',
        time: '2023-07-12 14:28:33',
        isRead: '1',
    },
    {
        content: '你负责的OKR已进入复盘阶段，请及时提交相关人员，开展OKR总结和讨论！',
        type: '1',
        time: '2023-06-27 09:20:38',
        isRead: '0',
    },
    {
        content: '风险提醒！你的OKR已长时间未更新进度，请及时维护！',
        type: '1',
        time: '2023-06-07 09:18:38',
        isRead: '1',
    },
    {
        content: '你负责的OKR已进入复盘阶段，请及时提交相关人员，开展OKR总结和讨论！',
        type: '1',
        time: '2023-05-18 10:26:52',
        isRead: '1',
    },
    {
        content: '许世强新建的OKR@了你，快来看看吧！',
        type: '1',
        time: '2023-05-09 09:20:56',
        isRead: '1',
    },
    {
        content: '你负责的OKR已审批通过，快点去实现你的目标吧！',
        type: '1',
        time: '2023-04-08 15:13:29',
        isRead: '1',
    }

  ])
  const [val, setVal] = useState('')

  const changeKey = (key) => {
    setActiveKey(key)
  }

  const changeMessage = (e) => { setVal(e.target.value) }
  return (
    <div className={styles.messageWrap}>
      <Tabs
        activeKey={activeKey}
        // tabPosition={'left'}
        onChange={changeKey}
        type="card"
      >
        <TabPane tab="站内消息(32)" key="1">
            <div style={{background: '#eceef0', padding: '20px'}}>
                <div className={styles.mess_box}>
                    <div className={styles.type_list}>
                        <Radio.Group value={val} onChange={changeMessage}>
                            <Radio value={''}>全部</Radio>
                            <Radio value={'1'}>已读</Radio>
                            <Radio value={'0'}>未读</Radio>
                        </Radio.Group>
                        <span style={{marginLeft: '20px'}}>消息类型：</span>
                        <Select value='工作流' style={{width: '220px'}}>
                            <Option value="1">工作流</Option>
                            <Option value="2">关注消息</Option>
                            <Option value="3">逾期预警</Option>
                        </Select>
                        <Search style={{ width: '300px', marginLeft: '50px' }} placeholder='请输入消息关键字查询' />
                    </div>
                    <div className={styles.mess_list}>
                        <List
                        header={<div></div>}
                        // bordered
                        dataSource={val ? mList.filter(itemVal => itemVal.isRead == val) : mList}
                        renderItem={(item) => <List.Item>
                            <div style={{display: 'flex',alignItems: 'center'}}>
                                <div style={{margin: '0 10px',width: '10px'}}>
                                    {item.isRead == 0 && <span className={styles.spot}></span>}
                                    {item.isRead != 0 && <CheckOutlined style={{color: 'green'}} />}
                                </div>
                               <div className={styles.mess_con} style={item.isRead == 0 ? {color: 'red'} : {color: 'green'}}>{item.content}</div>
                               <div style={{ marginLeft: '10px',color: '#948f8f',fontSize: '13px' }}>{item.time}</div>
                            </div>
                        </List.Item>}
                        />
                    </div>
                </div>
            </div>
        </TabPane>
        <TabPane tab="系统消息(99)" key="2">
            jjjj
        </TabPane>
      </Tabs>
    </div>
  );
};


export default connect()(MessagePage);
